<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    :width="500"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="单位名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入单位名称"
          :maxlength="255"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="是否允许小数" prop="is_float">
        <el-radio-group v-model="form.is_float">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
          :maxlength="255"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="optSubmit('ruleForm')"
          :loading="loading"
          >确 定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: "新增单位",
        edit: "编辑单位",
      },
      form: {
        name: "",
        is_float: 1,
        remark: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          { max: 255, message: "单位名称不能超过255个字符", trigger: "blur" },
        ],
        is_float: [
          { required: true, message: "请选择是否允许小数", trigger: "change" },
        ],
        remark: [
          { max: 255, message: "备注不能超过255个字符", trigger: "blur" },
        ],
      },
      loading: false,
      visible: false,
    };
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      this.form = this.$options.data().form;

      return this;
    },
    // 表单提交方法
    optSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let res;
          try {
            if (this.mode == "add") {
              res = await this.$API.unit.add.post(this.form);
            } else {
              res = await this.$API.unit.edit.post(this.form);
            }

            if (res.code == 0) {
              this.$message.success(res.msg);
              this.$emit("success");
            } else {
              this.$message.error(res.msg);
            }
          } catch (error) {
            this.$message.error("操作失败，请重试");
          } finally {
            this.loading = false;
          }
        } else {
          return false;
        }
      });
    },
    // 表单注入数据
    setData(item) {
      this.form.id = item.id;
      this.form.name = item.name;
      this.form.is_float = item.is_float;
      this.form.remark = item.remark || "";
    },
  },
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>